<template>
  <div class="divcontent">
    <div class="title">我的订单</div>
    <table  v-for="(order,index) in orders" :key="index" @click="MoreInfo(index)">
    <tr>
      <th>对公信息变更</th>
      <td :class="order.State=='0'? 'M1':'M2'" align="right">{{order.Message}}</td>
    </tr>
      <tr>
        <td>订单号</td>
        <td>{{order.derNamber}}</td>
      </tr>
      <tr>
        <td>预约号</td>
        <td>{{order.OppointNumber}}</td>
      </tr>
      <tr>
        <td>发起时间</td>
        <td>{{order.Time}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "MyOrder",
    data() {
      return {
        orders:[
          {derNamber: "XXXXXXXXXXXX",
                 OppointNumber:"X/",
                 Time:"2020-0407-12;30",
                  State:"0",
                  "Message":"待审核中"},
      {derNamber:"XXXXXXXXXXXX",
                 OppointNumber:"X/",
                   Time:"2020-0407-12;30",
        State:"1",
        "Message":"预约网点完成"}
        ],
        Info:""
      }
    },
    methods:{
      MoreInfo(value){
        console.info("输入的值"+value+this.orders[value]);
        this.Info =JSON.stringify(this.orders[value]);//将对象转换成字符串对象
        console.info(this.Info);
        this.$router.push({path: "/OrderInfo", query: {
              info:this.Info//传值
          }})
      }
    }
  }
</script>

<style scoped lang="less">
  .divcontent {
    background: #efefef;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    table{
      width: 95%;
      background: white;
      border: 1px ;
      margin-top: 5%;
      border-collapse:   separate;   border-spacing:   10px;
    }

  }
  .M1{
    color: red;
    font-size: 14px;
  }
  .M2{
    color: blue;
    font-size: 14px;

  }
  .cards {
    ul {
      padding: 0 10px;
      margin: 0;
      list-style-type: none;
      li {
        display: flex;
        flex: 7;
        height: 30px;
        align-items: left;
        > div:first-child {
          flex: 4;
        }
        > div:nth-child(2) {
          flex: 2;
        }
        > div:last-child {
          flex: 2;
        }
      }
    }
  }

  @keyframes changebig {
    0% {
      width: 5px;
      height: 5px;
    }
    100% {
      width: 80px;
      height: 80px;
    }
  }
</style>
